<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        main {
            width: 1300px;
            margin: 0 auto;
        }

        .m-search {
            margin-bottom: 10px;
            padding: 10px;
            border: 1px solid gray;
        }

        .m-cont {
            padding: 10px;
            border: 1px solid gray;
        }

        table {
            width: 100%;
            text-align: center;
        }

        table,
        th,
        tr,
        td {
            height: 30px;
            border: 1px solid gray;
            border-collapse: collapse;
        }
    </style>

</head>

<body>
    <main>
        <div class="m-search">
            姓名:
            <input type="text" name="uname" id="uname">
            <button>搜索</button>
            <a href="add.html">添加</a>
        </div>
        <div class="m-cont">
            <table>
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>学号</th>
                        <th>班级</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>年龄</th>
                        <th>电话</th>
                        <th>爱好</th>
                        <th>地址</th>
                        <th>备注</th>
                        <th>日期</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </main>
    <script>
        function getData(uname) {
            // 1.创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();
            // 2. 添加状态改变的回调函数,
            xhr.onreadystatechange = function () {
                //5 判断请求状态为4
                if (xhr.readyState == 4) {
                    // 6 判断响应状态码
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                        var arr = JSON.parse(xhr.response);
                        var str = ``;
                        arr.forEach(function (stu, i) {
                            str += `
              <tr>
                <td>${i + 1}</td>
                <td>${stu.id}</td>
                <td>${stu.clazz}</td>
                <td>${stu.name}</td>
                <td>${stu.gender}</td>
                <td>${stu.age}</td>
                <td>${stu.tel}</td>
                <td>${stu.hobby}</td>
                <td>${stu.address}</td>
                <td>${stu.remark}</td>
                <td>${stu.date}</td>
                <td>
                  <a href="update.html#${stu.id}">编辑</a>
                  <a href="javascript:del(${stu.id});">删除</a>
                </td>
              </tr>
            `
                        });
                        document.querySelector('tbody').innerHTML = str;
                    }
                }
            }
            var url = 'http://localhost:3008/api/student/getstudent';
            // 3. 打开连接设置请求方式和URL
            if (uname) {
                url += "?name=" + uname;
            }
            xhr.open("GET", url);
            // 4. 发送请求
            xhr.send();
        }
        getData();

        //搜索 参数姓名
        var btn = document.querySelector('button');
        btn.onclick = function () {
            var uname = document.querySelector("#uname");
            getData(uname.value);
        }

        //删除 参数id
        function del(id) {
            if (confirm('是否删除?')) {
                var xhr = new XMLHttpRequest();
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4) {
                        if (xhr.status >= 200 && xhr.status < 300 || xhr.status == 304) {
                            getData();
                        }
                    }
                }
            }
            var url = 'http://localhost:3008/api/student/removeStudent';
            xhr.open('POST', url);
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send("id=" + id);
        }

        
    </script>
</body>

</html>